<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../../js/react17/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script type="text/javascript" src="../../js/react17/react-dom.development.js"></script>
    <!-- 用于将jsx转为js -->
    <script type="text/javascript" src="../../js/react17/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../../js/react17/prop-types.js"></script>
</head>
<body>
    <div id="test"></div>

    <script type="text/babel">
        class MyComponent extends React.Component{
            state = {
                persons: [
                    {id: 1, name: "rollingball"},
                    {id: 2, name: "bollu"}
                ]
            }
            // 组件挂载后操作
            componentDidMount(){

            }
            // 组件即将卸载
            componentWillUnmount(){}
            
            // 比较用index和id作为key的区别
            render(){
                return (
                    <div>
                        <h2>show person</h2><button onClick={this.add}>add one guy</button>
                        <h3>use index</h3>
                        <ul>
                            {
                                this.state.persons.map((eachPerson,index)=>{
                                    return <li key={index}>{eachPerson.id}---{eachPerson.name}</li>
                                })
                            }
                        </ul>
                        <hr/>
                        <h3>use id</h3>
                        <ul>
                            {
                                this.state.persons.map((eachPerson,id)=>{
                                    return <li key={id}>{eachPerson.id}---{eachPerson.name}</li>
                                })
                            }
                        </ul>
                    </div>
                )
            }
            add = ()=>{
                // 拿到原来的数据
                const {persons} = this.state
                // 定义一条新的数据
                const p = {id:3, name: "one guy"}
                this.setState({persons: [p, ...persons]})
            }
        }
        
        let p ={}
        ReactDOM.render(<MyComponent {...p}/>,document.getElementById("test"))
    </script>
</body>
<style>
</style>
</html>